<template>
  <div v-loading="loading" class="remit">
    <el-dialog v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.2)" :visible.sync="dialogShow" title="打款" :close-on-click-modal="false" @close="handleBack">
      <c-form-container :column="1" :bottom="false">
        <el-form ref="form" :model="formData" :rules="formRules" label-width="120px">
          <el-form-item :span="1/2" prop="billingArea" label="开单面积" :rules="[{ required: true, message: '请填写开单面积' }]">
            <el-input-number v-model="formData.billingArea" size="mini" />
          </el-form-item>
          <el-form-item :span="1/2" prop="payResult" label="打款结果" :rules="[{ required: true, message: '请选择打款结果' }]">
            <c-dict-select v-model="formData.payResult" dict-type-code="PAY_RESULT" placeholder="打款结果" />
          </el-form-item>
          <el-form-item prop="payResultDesc" label="打款结果说明" :rules="[{ required: formData.payResult === 'GIVEUP_REMIT', message: '请输入打款结果说明' }]">
            <el-input v-model="formData.payResultDesc" type="textarea" :autosize="{minRows:3}" placeholder="打款结果说明" clearable />
          </el-form-item>
          <el-form-item prop="account" label="开单账号" :span="1/2" :rules="[{ required: true, message: '请选择开单账号' }]">
            <input-with-dialog
              v-model="formData.account"
              :props="{label:'code',value:'code'}"
              :multiple="false"
              :focus-query="true"
              :config="acccountConfig"
              @change="handleChangeAccount"
            />
          </el-form-item>
          <el-form-item label="账号名称" :span="1/2">
            <div>{{ formData.billerName }}</div>
          </el-form-item>
          <el-form-item>
            <div v-for="item in fileTypeList" :key="item.id">
              <div class="qup-title-box">
                <span class="border" /><span>附件上传-{{ item.attachmentType }}</span>
              </div>
              <file-uploader
                :data="item.fileList"
                :file-type="item.fileTypeName"
                :config-attachment-id="item.id"
                :limit="20"
                @remove="removeFile"
                @upload-success="uploadSuccessFile"
              />
            </div>
          </el-form-item>
          <!-- <el-form-item>
            <div>
              <el-button type="primary" @click="confirmHandle">确定</el-button>
              <el-button type="primary" @click="handleBack">取消</el-button>
            </div>
          </el-form-item> -->
        </el-form>
      </c-form-container>
      <div slot="footer">
        <el-button size="mini" @click="handleBack">取消</el-button>
        <el-button type="primary" size="mini" @click="confirmHandle">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { postConfigAttachmentTemplate, getProConfigEditData, changeFileList, changeConfigState } from '@/api/proConfig'
// import { getDictByPatchType } from '@/api/dataDict'
import fileUploader from '@/components/importFile'
import { getShopAttachment } from '@/api/decorate'
export default {
  name: 'Remit',
  components: {
    fileUploader
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
      required: true
    },
    detailData: {
      type: [String, Object],
      default: ''
    }
  },
  data() {
    return {
      loading: false,
      accountName: '',
      account: [],
      fileTypeList: [],
      formData: {
        result: '1',
        reason: '',
        handleResult: '',
        account: []
      },
      formRules: {},
      acccountConfig: {
        title: '开单账号',
        interfacePath: '/select-service/api/v1/account/page',
        apiHeader: { 'permission-code': 'decoration', 'Permission-App': 'slm' },
        setting: [
          {
            prop: 'code',
            title: '账号'
          },
          {
            prop: 'name',
            title: '姓名'
          }
        ]
      }
    }
  },
  computed: {
    dialogShow: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  async created() {
    this.formData.id = this.detailData.id

    await postConfigAttachmentTemplate('PRODUCT_CONFIG').then(res => {
      if (res.success === 1) {
        // 根据modelId获取每个配置id
        this.fileTypeList = res.data.records.filter(item => item.attachmentType === '打款凭证')
        this.fileTypeList.forEach(row => {
          this.$set(row, 'fileList', [])
        })
        this.getFiles()
      }
    })
    await getProConfigEditData(this.formData.id).then(res => {
      if (res.success && res.data) {
        this.formData = res.data
        const account = [{ label: this.formData.billerCode, value: this.formData.billerCode }]
        this.$set(this.formData, 'account', account)
      }
    })
    // const account = [{ label: this.formData.billerCode, value: this.formData.billerName }]
    // this.$set(this, 'account', account)
    const filterRaw = [{ 'id': 'customerCode', 'property': 'customerCode', 'operator': '=', 'value': this.formData.clientCode },
      { 'id': 'status', 'property': 'status', 'operator': '=', 'value': '1' }]
    this.$set(this.acccountConfig, 'filtersRaw', filterRaw)
  },
  methods: {
    // 获取附件
    getFiles() {
      getShopAttachment(this.detailData.id).then(res => {
        this.fileTypeList.forEach(row => {
          row.fileList = res.data.filter(i => i.configAttachmentId === row.id)
        })
        console.log('附件嘻嘻', this.fileTypeList)
      })
    },
    // 选择开单账号
    handleChangeAccount(row) {
      this.formData.billerCode = row[0].code
      this.formData.billerName = row[0].name
    },
    removeFile() {},
    uploadSuccessFile() {},
    // 返回
    handleBack() {
      this.dialogShow = false
      this.clearForm()
      this.$emit('success')
    },
    clearForm(done) {
      this.formData = {
        constData: [],
        staff: []
      }
      this.$refs.rulesForm && this.$refs.rulesForm.clearValidate()
      done && done()
    },
    // 确认
    confirmHandle() {
      this.$refs.form.validate(validate => {
        if (validate) {
          const len = this.fileTypeList.map(item => item.fileList.length)
          if (this.formData.payResult === 'REMIT') {
            if (!len[0]) {
              this.$message.warning('请至少上传一个打款凭证附件')
              return
            }
          }
          // return
          this.loading = true
          const dtos = this.fileTypeList.map(item => item.fileList)
          dtos[0].forEach(file => {
            file.modelId = this.formData.id
          })
          changeFileList(dtos[0], this.formData.id).then(res => {
            if (res.success) {
              changeConfigState(this.formData).then(res => {
                if (res.success) {
                  this.$message.success('操作成功')
                  this.clearForm()
                  this.dialogShow = false
                  this.$emit('success', false)
                }
                this.loading = false
              }).catch(() => {
                this.loading = false
              })
            }
          }).catch(() => {
            this.loading = false
          })
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.remit{
  display: inline-block;
  margin: 0 10px;
}
</style>
